<template>
  <div id="detail">
        <MyMtHeader titleText="动态详情"/>
        <div class="main">
            <div class="main-top">
                <div class="main-top-left">
                    <div class="img-box">
                        <img class="img" src="../../../static/1.jpg" alt="">
                    </div>
                    <span>15976912781</span>
                </div>
                <div class="main-top-right">
                    <a @click="showChange='true'" ></a>
                    <a  target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http%3A%2F%2F10.203.0.101%3A8080%2F%23%2Fsamsara%2Findexdetail%2F63%230-qzone-1-64504-d020d2d2a4e8d1a374a433f596ad1440&title=mobile&desc=&summary=&site="></a>
                    <a  target="_blank" href="https://service.weibo.com/share/share.php?url=http%3A%2F%2F10.203.0.101%3A8080%2F%23%2Fsamsara%2Findexdetail%2F63%230-tsina-1-73496-397232819ff9a47a7b7e80a40613cfe1&title=mobile&appkey=1343713053&searchPic=true"></a>
                    <a  target="_blank" href="http://v.t.qq.com/share/share.php?url=http%3A%2F%2F10.203.0.101%3A8080%2F%23%2Fsamsara%2Findexdetail%2F63%230-tqq-1-34894-89b7933b38b0586d98eb9d131fa70b46&title=mobile&appkey=801cf76d3cfc44ada52ec13114e84a96"></a>
                    <a  target="_blank" href="http://widget.renren.com/dialog/share?resourceUrl=http%3A%2F%2F10.203.0.101%3A8080%2F%23%2Fsamsara%2Findexdetail%2F63%230-renren-1-96169-98fde57bb3d39343db0f272b38411f3e&srcUrl=http%3A%2F%2F10.203.0.101%3A8080%2F%23%2Fsamsara%2Findexdetail%2F63%230-renren-1-96169-98fde57bb3d39343db0f272b38411f3e&title=mobile&description="></a>
                    <a  target="_blank" href="http://www.baidu.com"></a>

                </div>
            </div>
            <div class="main-middle">
                <img width="100%" height="100%" src="http://10.203.0.101:8081/shopping/resources/upload/2019-11-25/141ea69a78109ab69109549ba7ccb827.jpg" alt="">
            </div>
            <div class="main-footer">
                <div class="footer-top">发布一条动态。。。好用了。。。再来一条</div>
                <div class="footer-bottom">
                    <div class="footer-bottom-left"><span >读书</span></div>
                    <div class="footer-bottom-right">
                        <div @click="changeLoveNum">
                            <img src="" alt="">
                            <span >{{loveNum}}</span>
                        </div>
                        <div>
                            <img src="" alt="">
                            <span>{{allCommentNum}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="comment-box">
                <div class="item" v-for="(item,index) in commentList" :key="index">
                    <span class="user-name">{{item.userName}}:</span>
                    <span class="user-text">{{item.text}}. {{item.date}}</span>
                </div>
            </div>
            <div class="commit-box">
                <mt-field placeholder="请输入评论内容" v-model="text"></mt-field>
                <mt-button @click="commitComment" type="primary" size="small">发送评论</mt-button>
            </div>
        </div>
        <!-- 模态框 -->
        <div class="show-box" :class="[showChange ? 'active-show' : 'active-hide']" >
            <div class="show-top">
                <mt-cell title="分享到">
                    <i @click=" showChange = !showChange" class="mintui mintui-field-error"></i>
                </mt-cell>
            </div>
            <div class="show-middle">
                <ul class="show-middle-items">
                    <li v-for="n in 50" :key="n"><a target="_blank" href="http://s.share.baidu.com/mshare?click=1&url=http%3A%2F%2F10.203.0.101%3A8080%2F%23%2Fsamsara%2Findexdetail%2F63&uid=0&to=mshare&type=text&pic=&title=mobile&key=&desc=&comment=&relateUid=&searchPic=0&sign=on&l=1et6vlvvc1et6vm0uk1et7046gd&linkid=kki8fsk5vp6&firstime=1611306494240">一键分享</a></li>
                </ul>
            </div>
            <div class="show-footer">百度分享</div>
        </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import MyMtHeader from '../MyMtHeader/MyMtHeader.vue';
export default {
  components: { MyMtHeader },
    data(){
        return {
            loveNum:0,
            commentNum:0,
            commentList:[
                {userName:'159769127',text:'针不辍',date:new Date().toLocaleString()},
                {userName:'4399',text:'针好玩',date:new Date().toLocaleString()},
                {userName:'110',text:'怎么',date:new Date().toLocaleString()},
            ],
            text:'',
            showChange:false
        }
    },
    methods:{
        changeLoveNum(){
            this.loveNum === 0 ? this.loveNum = 1 : this.loveNum =0
        },
        commitComment(){
            let text = this.text
            if ( !text ) {
                Toast({
                    message: '评论内容不能为空',
                    duration: 800
                });
                return
            }
            this.commentList.push({
                userName:'123456',
                text,
                date:new Date().toLocaleString()
            })
            this.text = ''
            Toast('评论成功')
        },
    },
    computed:{
        allCommentNum(){
            return this.commentList.length
        }
    }
}
</script>

<style scoped>

.active-hide{
    display: none;
}
.active-show{
    display: block;
}


.main-top-left{
    display: flex;
    justify-content: space-between;
}
.main-top{
    display: flex;
    justify-content: space-between;
    padding: 10px 5px;
    height: 6.5vh;
    line-height: 6.5vh;
}
.main-top .img-box{
    margin: 5px 5px 5px 0px;
    width: 20px;
    height: 20px;
    /* margin: auto; */
}
.img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.main-top-right{
    padding: 5px;
}
.main-top-right a{
    display: inline-block;
    width: 25px;
    height: 24px;
    line-height: 18px;
    background-image: url('http://bdimg.share.baidu.com/static/api/img/share/icons_0_24.png?v=4c3f13b3.png');
}
.main-top-right a:nth-child(2){
    background-position: 0px -52px;
}
.main-top-right a:nth-child(3){
    background-position: 0 -104px;
}
.main-top-right a:nth-child(4){
    background-position: 0 -260px;
    
}
.main-top-right a:nth-child(5){
    background-position: 0 -208px;
    
}
.main-top-right a:nth-child(6){
    background-position: 0 -1612px;
    
}
.main-middle{
    width: 100%;
    height: 50vh;
}


.main-footer{
    display: flex;
    flex-direction: column;
}
.footer-top{
    padding: 10px;
    font-size: 14px;
}

.footer-bottom{
    margin-bottom: 10px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.footer-bottom-left span{
    display: inline-block;
    color: red;
    border: 1px solid red;
    border-radius: 5px;
    font-size: 12px;
}
.footer-bottom-right{
    display: flex;
    justify-content: space-between;
    width: 27%;
}
.footer-bottom-right img{
    width: 20px;
    height: 14px;
}



.footer .item{
    display: flex;
    padding: 10px;
}
.user-name{
    font-size: 17px;
    margin-right: 10px;
}
.user-text{
    font-size: 14px;
}


.show-box{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 5px solid #aaa;
    box-shadow: 0px 0px 10px rgb(99, 98, 98);
    margin: auto;
    width: 80vw;
    height: 330px;
    background: white;

}

.show-box >>> .mint-cell-title{
    text-align: left;
}

.show-middle-items{
    display: flex;
    flex-wrap: wrap;
    height: 250px;
    overflow: hidden;
    overflow-y: scroll;
}
.show-middle-items > li{
    margin:2px 5%;
    width: 40%;
    font-size: 12px;
}
.show-middle-items > li:nth-child(2) a{
    background-position: 0px -52px;
}
.show-middle-items > li:nth-child(3) a{
    background-position: 0px -104px;
}
.show-middle-items > li:nth-child(4) a{
    background-position: 0px -156px;
}
.show-middle-items > li >a{
    display: block;
    padding: 5px 0 5px 28px;
    width: 60px;
    line-height: 18px;
    background: url('http://bdimg.share.baidu.com/static/api/img/share/icons_0_24.png?v=4c3f13b3.png') no-repeat;
}

.show-footer{
    /* position:absolute; */
    padding: 10px;
    text-align: right;
    font-size: 12px;
    color: #999;
}
</style>